<script src="../../main.js"></script>
<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-picture-outline"></i> 创作技巧
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                  <el-button
                        type="primary"
                        icon="el-icon-lx-roundadd"
                        class="handle-del mr10"
                        @click="addItem"
                        v-if="globalPermission.creation.edit"
                   >新增作品
                    </el-button>
            </div>
            <el-table
                    :data="tableData"
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                    @selection-change="handleSelectionChange"
            >
                <el-table-column prop="id" label="id" width="80" align="center"></el-table-column>
                <el-table-column prop="title" show-overflow-tooltip align="center" label="标题"></el-table-column>
                <el-table-column label="封面"  width="80" align="center">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                icon="el-icon-lx-attention"
                                @click="handleImage(scope.row.id,scope.row.coverUrl)"
                        >查看</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="视频内容" align="center">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                icon="el-icon-lx-attention"
                                @click="handleVideo(scope.row.id,scope.row.videoUrl)"
                        >查看</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="createdTime"  width="160"  label="创建时间" align="center"></el-table-column>
                <el-table-column label="操作" width="180"  align="center">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                icon="el-icon-edit"
                                @click="handleDelete(scope.row.id,0)"
                                v-if="globalPermission.creation.edit"
                        >删除
                        </el-button>
                        <el-button
                                type="text"
                                icon="el-icon-edit"
                                @click="handleEdit(scope.row.id,scope.row)"
                                v-if="globalPermission.creation.edit"
                        >编辑
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="query.pageNum"
                        :page-size="query.pageSize"
                        :total="pageTotal"
                        @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>

      <!-- 编辑弹出框 -->
      <el-dialog title="查看/编辑" :visible.sync="editVisible" width="40%">
          <el-form ref="form" :model="form" label-width="120px">
              <el-form-item label="标题" >
                  <el-input v-model="form.title"></el-input>
              </el-form-item>
              <el-form-item label="视频地址" >
                  <video-player class="vjs-custom-skin" :options="playerOptions"></video-player>
                  <el-upload
                          ref="uploadPicture"
                          class="upload-demo"
                          action="http://47.97.3.27:8098/manager/topic/uploadVideo"
                          :headers="getToken"
                          :before-upload="beforeUpload"
                          :data="uploadData"
                          :on-success="handleAvatarSuccess"
                          multiple
                  >
                      <el-button size="medium" type="primary" >上传视频</el-button>
                  </el-upload>
              </el-form-item>
              <el-form-item label="视频封面">
                      <span  class="el-upload_tip" style="color:red;font-size:12px">点击下面图片即可观看大图</span>
                      <el-image
                              class="el-cover"
                              :src="form.coverUrl"
                              :preview-src-list="videoCovers"
                      ></el-image>
                      <el-upload
                             ref="uploadPicture"
                             class="el-upload"
                             action="http://47.97.3.27:8098/manager/topic/uploadImg"
                             :headers="getToken"
                             :on-success="refreshPicCover"
                             multiple
                      >
                          <el-button size="medium" type="primary" v-if="globalPermission.creation.edit">上传封面</el-button>
                      </el-upload>
              </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
              <el-button @click="clean">取 消</el-button>
              <el-button type="primary" @click="saveEdit">确 定</el-button>
          </span>
      </el-dialog>

    <!-- 图片 -->
    <el-dialog title="封面图" :visible.sync="imageVisible" width="40%">
        <el-table
                :data="picData"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
        >
            <el-table-column prop="imageName" label="图片(点击预览大图)" align="center">
                <template slot-scope="scope">
                    <el-image
                            class="table-td-thumb"
                            :src="picData[0]"
                            :preview-src-list="picData"
                    ></el-image>
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>

    <!-- 视频弹出框 -->
    <el-dialog title="预览视频" :visible.sync="videoVisible" @close='closeDialog' width="40%">
        <video-player class="vjs-custom-skin" :options="playerOptions"></video-player>
    </el-dialog>
    </div>
</template>

<script>
    import {getAll,editModel} from '../../api/creation';
    import {quillRedefine} from 'vue-quill-editor-upload'
    import { quillEditor,Quill } from 'vue-quill-editor';
    import {container, ImageExtend, QuillWatch} from 'quill-image-extend-module'
    Quill.register('modules/ImageExtend', ImageExtend);
    let fontSizeStyle = Quill.import('attributors/style/size');
    Quill.register(fontSizeStyle, true);
    //引入video样式
    import 'video.js/dist/video-js.css'
    import 'vue-video-player/src/custom-theme.css'
    var queryRequest = {url: "/manager/creation/getCreationList"};
    var delRequest = {url:"/manager/creation/delCreation"};
    var updateAddRequest = {url:"/manager/creation/updateCreation"};
    export default {
        name: 'usertable',
        data() {
            return {
                query: {
                    title: '',
                    pageNum: 1,
                    pageSize: 10,
                },
                statusQuery:{
                    id:'',
                    status
                },
                uploadData:null,
                picData :[],
                videoCovers :[],
                globalPermission: this.getPermission(),
                getToken:{'auth-token':localStorage.getItem('token')},
                tableData: [],
                multipleSelection: [],
                editVisible: false,
                formIdShow: false,
                pageTotal: 0,
                form: {},
                statusForm:{},
                idx: -1,
                id: -1,
                isCurEdit:false,
                imageVisible:false,
                videoVisible: false,
                playerOptions: {
                        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
                        autoplay: false, //如果true,浏览器准备好时开始回放。
                        controls: true, //控制条
                        preload: 'auto', //视频预加载
                        muted: false, //默认情况下将会消除任何音频。
                        loop: false, //导致视频一结束就重新开始。
                        language: 'zh-CN',
                        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                        sources: [{
                            type: 'video/mp4',
                            src: ''//你所放置的视频的地址，最好是放在服务器上
                        }],
                        //poster: "http://39.106.117.192:8080/static/indexImg.png", //你的封面地址（覆盖在视频上面的图片）
                        width: document.documentElement.clientWidth,
                        notSupportedMessage: '此视频暂无法播放，请稍后再试' //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                    },
            };
        },
        created() {
            queryRequest.data = this.query;
            this.getData();
        },
        methods: {
            // 获取数据
            getData() {
                //获取新闻列表
                getAll(queryRequest).then(res => {
                    this.tableData = res.data.list;
                    this.pageTotal = res.data.total;
                });
            },
            clean(){
                this.editVisible=false;
                this.handleSearch();
            },
            getPermission() {
                return JSON.parse(sessionStorage.getItem("permission"));
            },
            onInput0_100000(e) {
              this.$message.closeAll();
              // 验证是否是纯数字
              let isNumber = /^\d*$/.test(e.target.value);
              // 过滤非数字
              e.target.value = e.target.value.replace(/\D/g, "");
              if (!isNumber || e.target.value < 0 || e.target.value > 1000) {
                this.$message.warning("只能输入[0,100000]区间的整数");
              }
              e.target.value = (e.target.value >= 0 && e.target.value <= 1000 && e.target.value.match(/^\d*/g)[0]) || null;
            },

            // 触发搜索按钮
            handleSearch() {
                this.$set(this.query, 'pageNum', 1);
                this.getData();
            },
            refreshPic(response){
                this.handleSearch();
            },
            refreshPicCover(response){
                this.$message.success('图片上传成功');
                this.form.coverUrl = response.data;
                this.videoCovers = response.data.split(',');
            },
            handleAvatarSuccess(res, file) {
                this.playerOptions.sources[0].src=res.data;
            },
            beforeUpload (file) {
                this.uploadData = {id:this.id};
                let promise = new Promise((resolve) => {
                    this.$nextTick(function () {
                        resolve(true);
                    });
                });
                return promise; //通过返回一个promis对象解决
            },
            // 多选操作
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },

            // 新增
            addItem() {
                this.form={};
                this.isCurEdit = false;
                this.editVisible = true;
            },
            // 上下架操作
            handleDelete(id, status) {
                // 二次确认删除
                this.$confirm("你确定要删除吗?", '提示', {
                    type: 'warning'
                }).then(() => {
                    this.form.id = id;
                    this.form.status = status;
                    delRequest.data = this.form;
                    editModel(delRequest).then(res => {
                        if (res.code == 0) {
                            this.$message.success(`成功`);
                            this.editVisible = false;
                            this.handleSearch();
                        } else {
                            this.$message.error(res.message);
                        }
                    });
                }).catch(() => {
                });
            },
            // 编辑操作
            handleEdit(id, row) {
                this.id = id;
                this.form = row;
                this.form.id = this.id;
                //视频帖
                this.playerOptions.sources[0].src=row.videoUrl;
                this.form.coverUrl = row.coverUrl;
                this.videoCovers = row.coverUrl.split(',');

                this.editVisible = true;
            },
            // 新增
            addItem() {
                this.form={};
                this.playerOptions.sources[0].src='';
                this.editVisible = true;
            },
            // 保存编辑
            saveEdit() {
                this.form.videoUrl = this.playerOptions.sources[0].src;
                updateAddRequest.data = this.form;
                editModel(updateAddRequest).then(res => {
                    if (res.code == 0) {
                        this.$message.success(`修改成功`);
                        this.editVisible = false;
                        this.handleSearch();
                    } else {
                        this.$message.error(res.message);
                    }
                });
            },
            // 打开图片窗口
            handleImage(id,url) {
                this.id=id;
                this.picData[0]=url;
                this.imageVisible = true;
            },
            // 打开视频窗口
            handleVideo(id,videoUrl) {
                this.playerOptions.sources[0].src=videoUrl;
                this.videoVisible = true;
            },
            closeDialog(){
              this.playerOptions.sources[0].src='';
            },
            // 分页导航
            handlePageChange(val) {
                this.$set(this.query, 'pageNum', val);
                this.getData();
            }
        }
    };
</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 130px;
        display: inline-block;
    }

    .table {
        width: 100%;
        font-size: 14px;
    }

    .red {
        color: #ff0000;
    }

    .mr10 {
        margin-right: 10px;
    }

    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }

    .show {
        display: block;
    }

    .hide {
        display: none;
    }

    .checkbox-rows {
        width: 130px;
        margin-top: 10px;
    }

    .el-checkbox.is-bordered + .el-checkbox.is-bordered {
        margin-left: 0px;
    }

     .el-upload{
        background-color: #fff;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        height: 40px;
        text-align: center;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .upload-demo{
        background-color: #fff;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        height: 40px;
        text-align: center;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .el-cover{
        display: block;
        margin: auto;
        width: 200px;
        height: 150px;
    }
</style>
